<template>
  <a-drawer v-model:visible="visible" :title="isDisabled ? '设备信息查看' : '设备信息编辑'" placement="right" :width="520">
    <a-form ref="form" :model="model" :rules="rules" :label-col="{ span: 8 }" @finish="onFinish">
      <a-form-item label="设备名称" name="name">
        <a-input v-model:value="model.name" allowClear placeholder="请输入录像机名称" :maxlength="50" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备编码" name="equipmentCode">
        <a-input v-model:value="model.equipmentCode" placeholder="请输入设备编码" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备位置" name="position">
        <a-input v-model:value="model.position" placeholder="请输入设备位置" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备类型" name="equipmentType">
        <JDictSelectTag
          type="select"
          v-model:value="model.equipmentType"
          dictCode="equipment_type"
          placeholder="请选择设备类型"
          allowClear
          :disabled="isDisabled"
        />
      </a-form-item>
      <a-form-item label="设备IP" name="equipmentIp">
        <a-input v-model:value="model.equipmentIp" placeholder="请输入设备IP" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="站点编码" name="stationCode">
        <StationSelect v-model:value="model.stationCode" :disabled="isDisabled" />
        <!-- <a-select v-model:value="model.stationCode" placeholder="请选择站点编码" allowClear>
          <a-select-option value="">请选择</a-select-option>
          <template v-for="(vo, index) in stationList" :key="index">
            <a-select-option :value="vo.stationCode">
              {{ vo.name }}
            </a-select-option>
          </template>
        </a-select> -->
      </a-form-item>
      <a-form-item label="HTTP端口" name="httpPort">
        <a-input v-model:value="model.httpPort" placeholder="请输入HTTP端口" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="SDK端口" name="sdkPort">
        <a-input v-model:value="model.sdkPort" placeholder="请输入SDK端口" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="用户名" name="username">
        <a-input v-model:value="model.username" placeholder="请输入用户名" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input v-model:value="model.password" placeholder="请输入密码" allowClear :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="事件信息接收使用协议" name="useAgreement">
        <JDictSelectTag
          type="select"
          v-model:value="model.useAgreement"
          dictCode="camera_use_agreement"
          placeholder="请选择事件信息接收使用协议"
          allowClear
          :disabled="isDisabled"
        />
      </a-form-item>
      <template v-if="!isDisabled">
        <a-form-item label="操作">
          <a-button @click="resetForm">重置</a-button>
          <a-divider type="vertical" />
          <a-button type="primary" html-type="submit">提交保存</a-button>
        </a-form-item>
      </template>
    </a-form>
  </a-drawer>
</template>

<script>
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { equipmentAddApi, equipmentModifyApi, equipmentInfoApi } from '@/api/equipment';
import { StationSelect } from '/@/components/StationSelect';
import { JDictSelectTag } from '/@/components/Form';
import { useUserStore } from '/@/store/modules/user';
import { validateEquipmentCode, validateIP, validatePort, validatePassword } from './validate';
export default defineComponent({
  components: { JDictSelectTag, StationSelect },
  emits: ['oks'],
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();

    const userStore = useUserStore();

    let visible = ref(false);

    let model = ref({
      // 名称
      name: '',
      // 设备编码
      equipmentCode: '',
      // 设备ip
      equipmentIp: '',
      // 设备类型
      equipmentType: '',
      // 设备位置
      position: '',
      // 站点编码
      stationCode: '',
      // HTTP端口
      httpPort: '',
      // SDK端口
      sdkPort: '',
      // 用户名
      username: '',
      // 密码
      password: '',
      // 事件信息接收使用协议
      useAgreement: '',
    });

    let rules = ref({
      name: [{ required: true, message: '请输入设备类型' }],
      equipmentIp: [{ required: true, validator: validateIP, trigger: 'change' }],
      equipmentType: [{ required: true, message: '请选择设备类型' }],
      position: [{ required: true, message: '请输入设备位置' }],
      equipmentCode: [{ required: true, validator: validateEquipmentCode, trigger: 'change' }],
      // password: [{ required: true, validator: validatePassword, trigger: 'change' }],
      stationCode: [{ required: true, message: '请输入站点编码' }],
      // useAgreement: [{ required: true, message: '请选择事件信息接收使用协议' }],
    });

    // 站点列表
    let stationList = ref(userStore.getStationList);

    let isDisabled = ref(false);

    /**
     * 初始化NVR基础数据
     */
    function init(id, isCheck) {
      isDisabled.value = isCheck;
      equipmentInfoApi({ id }).then((res) => {
        res['useAgreement'] = res.useAgreement + '';
        res['equipmentType'] = res.equipmentType + '';
        model.value = res;
      });
    }

    watch(
      () => visible.value,
      (flag) => {
        if (!flag) {
          delete model.value.id;
          resetForm();
        }
      }
    );

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        equipmentAddApi(data)
          .then((res) => {
            proxy.$refs.form.resetFields();
            visible.value = false;
            emit('oks');
          })
          .catch((error) => {});
      } else {
        equipmentModifyApi(data).then((res) => {
          proxy.$refs.form.resetFields();
          visible.value = false;
          emit('oks');
        });
      }
    }

    function resetForm() {
      proxy.$refs.form.resetFields();
    }

    return {
      visible,
      model,
      rules,
      stationList,
      isDisabled,
      init,
      onFinish,
      resetForm,
    };
  },
});
</script>